<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<title>MVC Repeat with Selectable RoundRectDataList - Multiple Select</title>

	<script type="text/javascript" src="./../../../dojox/mobile/deviceTheme.js" data-dojo-config="mblThemeFiles: ['base']"></script>

	<!-- required: dojo.js -->
	<script type="text/javascript" src="../../../../../dojo/dojo.js"
		data-dojo-config="isDebug: true, async: true, parseOnLoad: false"></script>

	<script type="text/javascript">
		require([
			"dojox",
			"dojox/mvc",
			//"dojox/mobile/parser",
			"dojo/parser",
			"dojo/store/Memory",
			"dojo/ready",
			"dojox/mvc/_patches",
			"dojox/mvc/at",
			"dojox/mvc/Group",
			"dojox/mvc/Repeat",
			"dojox/mvc/Output",
			"dojox/mobile",
			"dojox/mobile/ScrollableView",
			"dojox/mobile/Button",
			"dojox/mobile/TextArea",
			"dojox/mobile/TextBox",
			"dojox/mobile/CheckBox",
			"dojox/mobile/ViewController",
			"dojox/mobile/FixedSplitter",
			"dojox/mobile/EdgeToEdgeList",
			"dojox/mobile/EdgeToEdgeCategory",
			"dojox/mobile/deviceTheme",
			"dojox/mobile/RoundRectCategory",
			"dojox/mobile/Heading"
		], function(dojox, mvc, parser, MemoryStore, ready){

			var search_results_init1 =
			[{
				"Query" : "Engineers1",
				"Results" : [
					{
						"First"	  : "Anne1",
						"Last"	  : "Ackerman1",
						"Checked" : true
					},
					{
						"First"	  : "Ben1",
						"Last"	  : "Beckham1",
						"Checked" : false
					},
					{
						"First"	  : "Chad1",
						"Last"	  : "Chapman1",
						"Checked" : false
					}
				]
			}];

			var search_results_init2 =
				[{
					"Query" : "Engineers1",
					"Results" : [
						{
							"First"	  : "Anne2",
							"Last"	  : "Ackerman2",
							"Checked" : false
						},
						{
							"First"	  : "Ben2",
							"Last"	  : "Beckham2",
							"Checked" : true
						},
						{
							"First"	  : "Chad2",
							"Last"	  : "Chapman2",
							"Checked" : false
						}
					]
				}];
			var memStore1 = new MemoryStore({data : search_results_init1});
			model1 = mvc.newStatefulModel({ store : memStore1 })[0];

			var memStore2 = new MemoryStore({data : search_results_init2});
			model2 = mvc.newStatefulModel({ store : memStore2 })[0];
			
			// when "dojo/ready" is ready call parser.parse (if not doing parseOnLoad)
			ready(function(){
				parser.parse();
			});



		});

		// called to reset the model for each of the repeats
		function swapToModel1() {
			dijit.byId('repeatId1').set('ref',model1.Results); 
			dijit.byId('repeatId2').set('ref',model1.Results); 
			dijit.byId('repeatid2arem').set('ref',model1.Results);
			dijit.byId('repeatid2aremg').set('ref',model1.Results);
			dijit.byId('repeatid2a').set('ref',model1.Results);			
		};

		function swapToModel2() {
			dijit.byId('repeatId1').set('ref',model2.Results); 
			dijit.byId('repeatId2').set('ref',model2.Results); 
			dijit.byId('repeatid2arem').set('ref',model2.Results);
			dijit.byId('repeatid2aremg').set('ref',model2.Results);
			dijit.byId('repeatid2a').set('ref',model2.Results);			
		};
		
		
	</script>
</head>
<body style="visibility:hidden;">
		<div id="wrapper">
			<div id="header">
				<div id="navigation"></div>
				<div id="headerInsert">
					<h2>MVC Repeat with Selectable RoundRectList - Multiple Select</h2>
				</div>
			</div>
			<div id="main">
				<div id="leftNav"></div>
				<div id="mainContent">
				<h4>Here is one using dojox.mvc.Repeat as a mixin with no Group and dojo.parser instead of dojox.mobile.parser it is all good using mixin.</h4>
				<ul data-dojo-type="dojox.mobile.RoundRectList"  id="repeatId1" select="multiple" 
					data-dojo-mixins="dojox.mvc.Repeat" data-dojo-props="exprchar:'#', ref:'model1.Results'">
							<li id="configure_itemmix1#{this.index}" class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem"  
								data-dojo-props="label: dojox.mvc.at('rel:#{this.index}.First', 'value'),
												checked: dojox.mvc.at('rel:#{this.index}.Checked', 'value')">
							</li>
				</ul>

				<h4>Here is one using MVC using Repeat no Group, with removeRepeatNode set true it is all good if Repeat sets select and onCheckStateChanged.</h4>
				<ul data-dojo-type="dojox.mobile.RoundRectList"  id="repeatparentidrem" select="multiple">
					<div data-dojo-type="dojox.mvc.Repeat" id="repeatid2arem" data-dojo-props="exprchar:'#', ref:'model1.Results', removeRepeatNode:true">
							<li id="configure_itemrem#{this.index}" class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem"  
								data-dojo-props="label: dojox.mvc.at('rel:#{this.index}.First', 'value'),
												checked: dojox.mvc.at('rel:#{this.index}.Checked', 'value')">
							</li>
					</div>
				</ul>

				<h4>Here is one using MVC using Repeat with a Group, with removeRepeatNode set true it is all good if Repeat sets select and onCheckStateChanged.</h4>
				<ul data-dojo-type="dojox.mobile.RoundRectList"  id="repeatparentidremg" select="multiple">
					<div data-dojo-type="dojox.mvc.Repeat" id="repeatid2aremg" data-dojo-props="exprchar:'#', ref:'model1.Results', removeRepeatNode:true">
						<div data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: '#{this.index}'">
							<li id="configure_itemremg#{this.index}" class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem"  
								data-dojo-props="label: dojox.mvc.at('rel:First', 'value'),
												checked: dojox.mvc.at('rel:Checked', 'value')">
							</li>
						</div>
					</div>
				</ul>
  
				<h4>You can update the label or checked from here to update the model.</h4>
				   <div id="repeatparentid2">
						<div id="repeatId2" data-dojo-type="dojox.mvc.Repeat" data-dojo-props="ref:'model1.Results'">
								<input class="cell" data-dojo-type="dojox.mobile.TextBox" id="nameInput2${this.index}" 
										data-dojo-props="value: dojox.mvc.at('rel:${this.index}.First', 'value')"/>
		  						<label data-dojo-type="dojox.mvc.Output" for="CBInput${this.index}" 
										data-dojo-props="value: dojox.mvc.at('rel:${this.index}.First', 'value')"/></label>
								<input class="cell" type="checkbox" data-dojo-type="dojox.mobile.CheckBox" id="CBInput${this.index}" 
										data-dojo-props="checked: dojox.mvc.at('rel:${this.index}.Checked', 'value')"/>
						</div>
					</div>

					<br/>Model:
					<button type="button" data-dojo-type="dojox.mobile.Button" data-dojo-props="onClick: function(){swapToModel2();}">Swap Model2</button> 
					<button type="button" data-dojo-type="dojox.mobile.Button" data-dojo-props="onClick: function(){swapToModel1();}">Swap Model1</button> 					
					<button id="reset" type="button" data-dojo-type="dojox.mobile.Button" data-dojo-props="onClick: function(){model1.reset();model2.reset();}">Reset all</button>
				
				<h4>Here is one using MVC using Repeat no Group, using useParent it has style and 
				selection problems because of the Group nodes, updates to the model are reflected here, looks good, but has selection problems...
				Also the Swap model buttons do not work with this one.
				</h4>
				<ul data-dojo-type="dojox.mobile.RoundRectList"  id="repeatparentid" select="multiple">
					<div data-dojo-type="dojox.mvc.Repeat" id="repeatid2a" data-dojo-props="exprchar:'#', ref:'model1.Results', useParent:'repeatparentid'">
							<li id="configure_item#{this.index}" class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem"  
								data-dojo-props="label: dojox.mvc.at('model1.Results.#{this.index}.First', 'value'),
												checked: dojox.mvc.at('model1.Results.#{this.index}.Checked', 'value')">
							</li>
					</div>
				</ul>

		<!--
					<h4>Here is a normal RoundRectList for comparison Item one should be selected</h4>
					<ul id="list1a" data-dojo-type="dojox.mobile.RoundRectList" select="multiple" >
							<li id="configure_itemXX0" class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem"  
								data-dojo-props="label: dojox.mvc.at(model1.Results[0].First, 'value'),
												checked: dojox.mvc.at(model1.Results[0].Checked, 'value')">
							</li>
							<li id="configure_itemXX1" class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem"  
								data-dojo-props="label: dojox.mvc.at(model1.Results[1].First, 'value'),
												checked: dojox.mvc.at(model1.Results[1].Checked, 'value')">
							</li>
					</ul>	
		-->	
				</div>
			</div>
		</div>
	</body>
</html>
